<!--
 * @Description: 密码强度提示框
 * @Author: zhaolei
 * @Date: 2023-07-10 14:38:15
-->

<template>
  <el-tooltip
    v-model="value"
    :placement="placement || defaultPlacement"
    effect="light"
    popper-class="pwd-tip"
    :manual="true"
  >
    <div
      slot="content"
      class="tip-content"
    >
      <p
        class=""
        :class="{'illegal': pwdStrength === PWD_STRENGTH.ILLEGAL,'weak': pwdStrength === PWD_STRENGTH.WEAK, 'middle': pwdStrength === PWD_STRENGTH.MIDDLE, 'strong': pwdStrength === PWD_STRENGTH.STRONG}"
      >
        强度：{{ strengthDesc }}
      </p>
      <el-progress
        :percentage="percentage"
        :color="color"
        :format="format"
      ></el-progress>
      <p
        class="tip"
        v-html="ruleDesc"
      >
      </p>
    </div>
    <slot></slot>
  </el-tooltip>
</template>

<script>
import { checkPwdStren } from '@/util';
import { PWD_STRENGTH } from '@/const/type';
import styleVariables from '@/styles/style-variables.scss';

export default {
  name: 'PwdTip',
  props: {
    password: {
      type: String,
      required: true,
    },
    placement: {
      type: String,
      validator: function (value) {
        return (
          [
            'top',
            'top-start',
            'top-end',
            'bottom',
            'bottom-start',
            'bottom-end',
            'left',
            'left-start',
            'left-end',
            'right',
            'right-start',
            'right-end',
          ].indexOf(value) !== -1
        );
      },
    },
    value: {
      type: Boolean,
      default: false,
    },
    gutter: {
      type: Number,
      default: 0,
    },
    ruleDesc: {
      type: String,
      default:
        '请输入 6至20 个字符。(必须包含大、小<br />写字母/数字以及特殊符号中的三种)',
    },
    min: {
      type: Number,
      default: 6,
    },
    strength: {
      type: Number,
      default: PWD_STRENGTH.STRONG,
    },
  },
  data() {
    return {
      pwdStrength: PWD_STRENGTH.ILLEGAL,
      PWD_STRENGTH: PWD_STRENGTH,
      strengthDesc: '太短',
      color: styleVariables.danger,
      defaultPlacement: 'top',
    };
  },
  computed: {
    percentage() {
      const pwdLength = this.password ? this.password.length : 0;

      if (pwdLength < this.min) {
        return (pwdLength / 6) * 33;
      }
      if (this.pwdStrength === PWD_STRENGTH.WEAK) {
        return 33;
      } else if (this.pwdStrength === PWD_STRENGTH.MIDDLE) {
        return 66;
      }
      return 100;
    },
  },
  watch: {
    password: {
      immediate: true,
      handler(pwd) {
        // console.log(pwd);
        this.pwdStrength = checkPwdStren(pwd, this.min);
      },
    },
    pwdStrength: {
      immediate: true,
      handler(val) {
        if (val === PWD_STRENGTH.ILLEGAL) {
          this.strengthDesc = '太短';
          this.color = styleVariables.danger;
        } else if (val === PWD_STRENGTH.WEAK) {
          this.strengthDesc = '弱';
          this.color = styleVariables.danger;
        } else if (this.pwdStrength === PWD_STRENGTH.MIDDLE) {
          this.strengthDesc = '中';
          this.color = styleVariables.warning;
        } else {
          this.strengthDesc = '强';
          this.color = styleVariables.success;
        }
      },
    },
  },
  mounted() {
    if (document.documentElement.clientWidth > 1534) {
      this.defaultPlacement = 'right';
    }
  },
  methods: {
    format() {
      return '';
    },
    isValid() {
      return this.pwdStrength >= this.strength;
    },
  },
};
</script>

<style lang="scss" scoped>
$--pwdtip-arrow-color: rgba(48, 49, 51, 0.2);
.tip-content {
  min-width: 200px;

  p {
    font-size: 14px;
    margin: 6px 0px;
    &.weak,
    &.illegal {
      color: $--color-danger;
    }
    &.middle {
      color: $--color-warning;
    }
    &.strong {
      color: $--color-success;
    }
    &.tip {
      color: #515a6e;
      line-height: 20px;
    }
  }
  ::v-deep {
    .el-progress-bar {
      padding-right: 0px;
    }
  }
}
.pwd-tip {
  &.el-tooltip__popper.is-light {
    box-shadow: #666 0px 0px 2px;
    border: 0px;
    &[x-placement^='top'] .popper__arrow {
      border-top-color: $--pwdtip-arrow-color;
    }
    &[x-placement^='right'] .popper__arrow {
      border-right-color: $--pwdtip-arrow-color;
    }
    &[x-placement^='left'] .popper__arrow {
      border-left-color: $--pwdtip-arrow-color;
    }
  }
}
</style>
